<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h:form id="formSub" prependId="false">
            <p:panel id="panel" header="Bem Vindo ao Cadastro de Subscrição">
                <p:dataTable id="tabClientePesq" widgetVar="wtabClientePesq" var="cliente" 
                             value="#{clienteBean.lazyModel}" paginator="true" rows="10" lazy="true"
                             selection="#{subscricaoBean.selectedCliente}" selectionMode="single"
                             onRowSelectUpdate="messages, panel, display, tabSubscricao" onRowSelectComplete="subscricaoDialog.show()" update="panel, tabSubscricao"
                             rowSelectListener="#{subscricaoBean.onSelectRowCliente}">

                    <f:facet name="header">
                        Selecione uma linha clique para Seleção
                    </f:facet>

                    <p:column headerText="Razão Social / Nome" sortBy="#{cliente.nomCliente}" filterBy="#{cliente.nomCliente}">
                        <h:outputText value="#{cliente.nomCliente}" />
                    </p:column>

                    <p:column headerText="C.N.P.J. / C.P.F." style="text-align: center;">
                        <h:outputText value="#{cliente.numCpf}">
                            <f:converter converterId="mascaraConverter" />
                            <f:attribute name="tipo" value="#{cliente.tipCliente}" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Tipo" sortBy="#{cliente.tipCliente}" filterBy="#{cliente.tipCliente}"  
                              filterOptions="#{clienteBean.tipClienteOptions}" filterMatchMode="exact">
                        <h:outputText value="#{cliente.dscTipo}" />
                    </p:column>

                    <p:column headerText="Qde.Ações" style="text-align: right">
                        <h:outputText value="#{cliente.qdeAcao}" />
                    </p:column>
                </p:dataTable>
            </p:panel>
            <!-- DETALHES SUBSCRICAO -->
            <p:dialog id="dialog" header="Detalhes Subscrição" widgetVar="subscricaoDialog" resizable="true"
                      width="1300" showEffect="explode" hideEffect="explode">

                <p:panel id="panelDetalhe" header="Detalhes Subscrição">
                    <p:dataTable id="tabSubscricao" var="sub" value="#{subscricaoBean.lazyModel}"
                                 widgetVar="wtabSubscricao" paginator="true" rows="5" lazy="true"
                                 selection="#{subscricaoBean.selectedSubscricao}" selectionMode="single"
                                 onRowSelectUpdate="panel, display">

                        <p:column headerText="Data Movimentação" sortBy="#{sub.datSubscricao}">
                            <h:outputText value="#{sub.datSubscricao}">
                                <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Subscritas" sortBy="#{sub.qdeSubscrita}" style="width:200px; text-align: right;">
                            <h:outputText value="#{sub.qdeSubscrita}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="0" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Valor Realizado" sortBy="#{sub.vlrRealizado}" style="width:200px; text-align: right;">
                            <h:outputText value="#{sub.vlrRealizado}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Valor a Realizar" sortBy="#{sub.vlrRealizar}" style="width:200px; text-align: right;">
                            <h:outputText value="#{sub.vlrRealizar}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Anotação" sortBy="#{sub.idAnotacao.dscAnotacao}" style="width:1000px;">
                            <h:outputText value="#{sub.idAnotacao.dscAnotacao}" />
                        </p:column>

                    </p:dataTable>

                    <h:panelGrid id="display" columns="2" style="margin-bottom:50px" cellpadding="5">
                        <h:outputText value="Acionista:" />
                        <p:inputText id="inCliente" value="#{subscricaoBean.selectedSubscricao.idCliente.nomCliente}" readonly="true" 
                                     style="width:700px; font-weight:bold;" />

                        <h:outputText value="Anotação:" />
                        <h:panelGrid columns="2">
                            <p:inputText id="inAnotacao" value="#{subscricaoBean.selectedSubscricao.idAnotacao.dscAnotacao}" readonly="true" 
                                         style="width:700px; font-weight:bold;" />
                            <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Anotação" onclick="anotacaoDialog.show()" /> 
                        </h:panelGrid>

                        <h:outputText value="Data Subscrição:" />
                        <p:calendar id="inDatSubscricao" locale="pt" value="#{subscricaoBean.selectedSubscricao.datSubscricao}" pattern="dd/MM/yyyy" />

                        <h:outputText value="Qde.Subscritas:" />
                        <p:inputText id="qdeSubscrita" widgetVar="qdeSubscrita" value="#{subscricaoBean.selectedSubscricao.qdeSubscrita}" 
                                     style="width:200px; font-weight:bold; text-align: right;"
                                     onkeyup="javascript:maskIt(this,event,'###.###.###',true)">
                            <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="0" />
                        </p:inputText>

                        <h:outputText value="Valor Realizado:" />
                        <p:inputText id="vlrRealizado" widgetVar="vlrRealizado" value="#{subscricaoBean.selectedSubscricao.vlrRealizado}" 
                                     style="width:200px; font-weight:bold; text-align: right;"
                                     onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)">
                            <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                        </p:inputText>

                        <h:outputText value="Valor a Realizar:" />
                        <p:inputText id="vlrRealizar" widgetVar="vlrRealizar" value="#{subscricaoBean.selectedSubscricao.vlrRealizar}" 
                                     style="width:200px; font-weight:bold; text-align: right;"
                                     onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)">
                            <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                        </p:inputText>
                        <h:inputHidden id="idCliente" value="#{subscricaoBean.selectedSubscricao.idCliente.idCliente}" />
                    </h:panelGrid>
                    <p:outputPanel rendered="#{loginBean.disableButton}">
                        <p:commandButton value="Inserir" update="messages, panel, display, tabSubscricao"
                                         actionListener="#{subscricaoBean.inserir}" oncomplete="subscricaoDialog.hide()" process="@this" />
                        <p:commandButton value="Alterar" update="messages, panel, display, tabSubscricao"
                                         actionListener="#{subscricaoBean.alterar}" oncomplete="subscricaoDialog.hide()" />
                        <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" />
                    </p:outputPanel>
                </p:panel>
            </p:dialog>
            <!-- PESQUISA ANOTACAO -->
            <p:dialog id="dialogAnotacao" header="Pesquisa Anotação" widgetVar="anotacaoDialog" resizable="true"
                      width="800" showEffect="explode" hideEffect="explode" position="'right',30">

                <p:dataTable id="tabAnotacao" widgetVar="wtabAnotacao" var="anotacao" value="#{anotacaoBean.lazyModel}" paginator="true" rows="10" lazy="true"
                             emptyMessage="Nenhum Registro Retornado ..."
                             selection="#{subscricaoBean.selectedAnotacao}" selectionMode="single"
                             onRowSelectComplete="anotacaoDialog.hide()" onRowSelectUpdate="inAnotacao"
                             rowSelectListener="#{subscricaoBean.onSelectRow}">

                    <f:facet name="header">
                        Selecione uma linha e clique para Seleção
                    </f:facet>

                    <p:column headerText="Descrição" sortBy="#{anotacao.dscAnotacao}" filterBy="#{anotacao.dscAnotacao}">
                        <h:outputText value="#{anotacao.dscAnotacao}" />
                    </p:column>

                </p:dataTable>
            </p:dialog>

            <!-- CONFIRMACAO EXCLUSAO -->
            <p:confirmDialog message="Confirma a Exclusão dessa Subscrição?" header="Exclusão da Subscrição" severity="alert" widgetVar="confirmation">

                <p:commandButton value="Sim" update="messages, panel, display, tabSubscricao" oncomplete="confirmation.hide(),subscricaoDialog.hide()"
                                 actionListener="#{subscricaoBean.excluir}" />
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />

            </p:confirmDialog>
        </h:form>
    </ui:define>
</ui:composition>